<template>
  <el-dialog
	  title="修改用户"
	  class="edit-user-dialog edit-dialog"
	  :visible.sync="dialog_visible"
	  @closed="dialogClosedHandle"
	  width="40%">
	  <el-tabs v-model="active_name">
	    <el-tab-pane label="职位管理" name="job_manage">
	    	<el-form class="user-form cus-form">
	    		<el-form-item label="调整职位" class="required">
		  			<el-cascader
					    expand-trigger="hover"
					    filterable
					    placeholder="可搜索"
					    :props="{value:'id',label:'name',children:'jobs'}"
					    v-model="job_selected_arr"
					    :options="departments">
					  </el-cascader>
		  		</el-form-item>
		  		<el-form-item label="入职管理" class="required">
			  		<el-switch
						  v-model="job_status"
						  active-text="在职"
						  inactive-text="离职">
						</el-switch>
					</el-form-item>
	    	</el-form>
	    </el-tab-pane>
	    <el-tab-pane label="信息管理" name="info_setting">
	    	<el-form class="user-form cus-form">
	    		<div class="row">
	    			<el-form-item label="工号">
			  			<cusInput :v_input.sync="id_num" :disabled="true"></cusInput>
			  		</el-form-item>
			  		<el-form-item label="姓名" class="required">
			  			<cusInput maxlength=8 :v_input.sync="form_data.name" :no_chinese="false"></cusInput>
			  		</el-form-item>
	    		</div>
	    		<div class="row">
	    			<el-form-item label="电话">
			  			<cusInput maxlength=11 :v_input.sync="form_data.phone"></cusInput>
			  		</el-form-item>
			  		<el-form-item label="邮箱">
			  			<cusInput maxlength=26 :v_input.sync="form_data.email"></cusInput>
			  		</el-form-item>
	    		</div>
		  		<el-form-item label="备注">
						<cusInput maxlength=36 type="textarea" :v_input.sync="form_data.remark" :no_chinese="false"></cusInput>
					</el-form-item>
	    	</el-form>
	    </el-tab-pane>
	  </el-tabs>
	  <span slot="footer" class="dialog-footer">
	    <el-button @click="dialog_visible = false">取 消</el-button>
	    <el-button type="primary" @click="submitEdit" :loading="btn_loading">确 定</el-button>
	  </span>
	</el-dialog>
</template>
<script>
	import cusInput from 'components/cus_input.vue';
	import { verifyPhone, verifyMailbox } from 'assets/js/utils.js';
	export default {
		props: {
			departments: {
				default: []
			}
		},
		data() {
			return {
				dialog_visible: false,
				active_name: 'job_manage',
				job_selected_arr: [],
				job_status: false,
				id_num: '',
				form_data: {
					name: '',
					phone: '',
					email: '',
					remark: ''
				},
				user_bak: {},

				btn_loading: false
			}
		},
		methods: {
			show(user) {
				this.dialog_visible = true;
				this.initForm(user);
			},
			initForm(user = {}) {
				this.job_selected_arr = user.jobId && user.departmentId ? [user.departmentId, user.jobId] : [];
				this.job_status = user.status == 1;
				this.id_num = user.idNum || '';
				this.form_data = {
					name: user.name || '',
					phone: user.phone || '',
					email: user.email || '',
					remark: user.remark || ''
				};
				this.user_bak = user;
			},
			submitEdit() {
				if(!this.id_num) return;
				let send_data = {}, this_user_bak = this.user_bak;

				if(this.active_name == 'job_manage') {
					let f_status = Number(this.job_status);
					let f_job_selected = this.job_selected_arr[1];
					if(f_status != this_user_bak.status) send_data.status = f_status;
					if(f_job_selected && f_job_selected != this_user_bak.jobId) send_data.job_id = f_job_selected;
				}else if(this.active_name == 'info_setting') {
					let this_form_data = this.form_data;
					if(!this_form_data.name) {
						this.$message.error('姓名项为必填');
						return;
					}
					if(this_form_data.phone && this_user_bak.phone != this_form_data.phone && verifyPhone(this_form_data.phone)) {
						this.$message.error('手机号格式错误');
						return;
					}
					if(this_form_data.email && this_user_bak.email != this_form_data.email && verifyMailbox(this_form_data.email)) {
						this.$message.error('邮箱格式错误');
						return;
					}
					for(let item in this_form_data) {
						if(this_user_bak[item] != this_form_data[item]) {
							send_data[item] = this_form_data[item];
						}
					}
				}
				if(Object.keys(send_data).length) {
					this.btn_loading = true;
					send_data.id_num = this.id_num;
					this.$axios.post('/admin/editUser', send_data).then(res => {
						if(res.s == 1) {
							this.$message.success('修改成功');
							this.dialog_visible = false;
							this.$emit('reloadTb');
						}
					}).finally(() => {
						this.btn_loading = false;
					})
				}else {
					this.$message.error('请修改后提交')
				}
			},
			dialogClosedHandle() {
				this.initForm();
				this.active_name = 'job_manage';
			}
		},
		components: {
			cusInput
		}
	}
</script>